import React, {useEffect} from 'react'
import {connect} from 'react-redux'

// components
import CustomButton from "../../../shared-components/CustomButton/CustomBotton"

// icon
import onLiveIcon from '../../../res/images/web/follow/small-play-btn-orange.png'
import ReloadIcon from '../../../res/images/web/follow/reload.png'

// stylesheet
import './FollowSteamers.css'

// mock data
import {hotSteamers, followSteamers} from "../../../utils/mockdata"

// antd-mobile
import {List, WhiteSpace, WingBlank} from 'antd-mobile'
const Item = List.Item


const FollowSteamers = props => {
    // state
    const userid = localStorage.getItem('userid')
    const {following,} = props
    // dispatch
    const {
        fetchFollowList,
        doCancelFollow,
        doAddFollow,
    } = props

    useEffect(() => {
        const userid = localStorage.getItem('userid')
        fetchFollowList(userid)
    },[])

    // functions
    const cancelFollow = (steamerId) => {
        const uid = userid
        const tuid = steamerId
        doCancelFollow({uid, tuid,})
    }

    const addFollow = (steamerId) => {
        const uid = userid
        const tuid = steamerId
        doAddFollow({uid, tuid})
    }

    // template
    const arr = [...followSteamers, ...following[1]]
    const followSteamersTemplate = arr.map((steamer, index) => {
        const onLiveTemplate = steamer.Isshowing
            ? (
                <div className='follow-steamer-onlive-icon'>
                    <span>直播中</span>
                    <img src={onLiveIcon} alt=''/>
                </div>
            )
            : null

        const thumbStyle = {
            height: '42px',
            width: '42px',
            borderRadius: '50%',
            border: '3px solid #f3f3f3',
            background: `url(${steamer.iconUrl})`,
            backgroundSize: 'cover',
        }

        const thumbTemplate = (
            <div style={thumbStyle}/>
        )

        const cancelFollowBtn = (steamerId) => {
            return (
                <div
                >
                    <CustomButton
                        inline='true'
                        size='xs'
                        bg='#fff'
                        color='#333'
                        onClick={() => {cancelFollow(steamerId)}}
                        border='1px solid rgba(51,51,51,0.1)'
                    >取消关注</CustomButton>
                </div>
            )
        }

        return (
            <Item
                key={index}
                // key={steamer.Who}
                ref={steamer.ref}
                thumb={thumbTemplate}
                extra={cancelFollowBtn(steamer.Isfollowing)}
                style={{height: '60px'}}
            >
                <div className='flex-align-center'>
                    {steamer.Nickname}{onLiveTemplate}
                </div>
            </Item>
        )
    })

    // const
    const hotSteamersItemsTemplate = hotSteamers.map(steamer => {
        const iconContainerStyle = {
            background: `url(${steamer.iconUrl})`,
            backgroundSize: 'cover',
        }
        const btn = (
            <CustomButton
                inline='true'
                size='xs'
            >关注ta</CustomButton>
        )
        const t = steamer => (
            <div
                className='follow-steamer-recommend'
                key={steamer.id}
            >
                <div
                    className='follow-steamer-recommend-avatar'
                    style={iconContainerStyle}
                />
                <p>{steamer.name}</p>
                <div
                    onClick={() => {addFollow(steamer.id)}}
                >{btn}</div>
            </div>
        )
        return t(steamer)
    })

    const hotSteamersTemplate = (
        <div className='follow-steamer-recommend-container'>
            {hotSteamersItemsTemplate}
        </div>
    )

    const refreshBtnTemplate = (
        <div className='follow-steamer-refresh-btn'>
            <img src={ReloadIcon} style={{marginRight: '6px'}} alt=''/>
            <p>换一波</p>
        </div>
    )

    return (
        <React.Fragment>

            <WhiteSpace size='xl'/>
            <WingBlank>
                <p className='follow-title'>已关注</p>
            </WingBlank>
            <WhiteSpace/>

            <List>
                {followSteamersTemplate}
            </List>

            <WhiteSpace size='xl'/>
            <WingBlank>
                <p className='follow-title'>推荐关注</p>
            </WingBlank>
            <WhiteSpace/>

            <WingBlank>
                <WhiteSpace/>
                {hotSteamersTemplate}
                <WhiteSpace/>
                {refreshBtnTemplate}
            </WingBlank>

        </React.Fragment>
    )
}

const mapStatesToProps = ({user:{following,}},) => ({
    following,
})

const mapDispatchToProps = ({user: {fetchFollowList, doCancelFollow, doAddFollow,},}) => ({
    fetchFollowList: (id) => fetchFollowList(id),
    doCancelFollow: (payload) => doCancelFollow(payload),
    doAddFollow: (payload) => doAddFollow(payload),
})

export default connect(mapStatesToProps, mapDispatchToProps)(FollowSteamers)


